#{extends 'main.html' /}
#{set title:'index.html' /}


#{if flash.success}
<div class="alert alert-success">${flash.success}</div>    
#{/if}
#{elseif flash.error}
<div class="alert alert-error">${flash.error}</div>
#{/elseif}	
<div class="well">
	<fieldset>
		<legend>Registro de Personas</legend>
		<form class="form-horizontal" id="formulario-persona" action="@{Personas.guardar()}">
			<div class="control-group">
				<label class="control-label required-form" for="deNombre">Nombre</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="deNombre" name="persona.deNombre" autocomplete="off" value="${flash['persona.deNombre']}"/>
						<span class="add-on"><i class="icon-user"></i></span>
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="dePaterno">Paterno</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="dePaterno" name="persona.deParteno" autocomplete="off" value="${flash['persona.dePaterno']}"/>
						<span class="add-on"><i class="icon-user"></i></span>
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="deMaterno">Materno</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="deMaterno" name="persona.deMaterno" autocomplete="off" value="${flash['persona.deMaterno']}" />
						<span class="add-on"><i class="icon-user"></i></span>
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="deSexo">Sexo</label>
				<div class="controls">
					<div class="input-append">
						<select class="select" name="persona.deSexo" id="deSexo">
							<option value="M">MASCULINO</option><option value="F">FEMENINO</option>
						</select>						
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="coTipoDeDocumento">Tipo de Documento</label>
				<div class="controls">
					<div class="input-append">
						<select class="select" id="coTipoDeDocumento" type="select-one" autocomplete="off" name="persona.tipodedocumento.coTipoDeDocumento">
							<option value="00">--SELECCIONE--</option>
							#{list items:tiposDeDocumento,as:'tipoDeDocumento'}
								<option value="${tipoDeDocumento.coTipoDeDocumento}">${tipoDeDocumento.deTipoDeDocumento}</option>
							#{/list}
						</select>
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="coTipoPersona">Tipo de Persona</label>
				<div class="controls">
					<div class="input-append">
						<select class="select" id="coTipoPersona" type="select-one" autocomplete="off" name="persona.tipopersona.coTipoPersona">
							<option value="00">--SELECCIONE--</option>
							#{list items:tiposDePersona,as:'tipoDePersona'}
								<option value="${tipoDePersona.coTipoPersona}">${tipoDePersona.deTipoPersona}</option>
							#{/list}
						</select>
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="nuDocumento">Numero de Documento</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="nuDocumento" name="persona.nuDocumento" autocomplete="off" maxlength="10" value="${flash['persona.nuDocumento']}"/>
						<span class="add-on"><i class="icon-file"></i></span>
					</div>
					<span class="help-inline hide" id="spanNuDocumento">El numero ingresado ya existe</span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="deCorreo">Correo Electronico</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="deCorreo" name="persona.deCorreo" autocomplete="off" value="${flash['persona.deCorreo']}"/>
						<span class="add-on"><i class="icon-envelope"></i></span>
					</div>					
					<span class="help-inline hide" id="spanDeCorreo">El corre ingresado ya existe</span>
				</div>
				
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="deTelefono">Telefono</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="deTelefono" name="persona.deTelefono" autocomplete="off" value="${flash['persona.deTelefono']}"/>
						<span class="add-on"><i class="icon-envelope"></i></span>
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="daFechaNacimiento">Fecha de Nacimiento</label>
				<div class="controls">
					<div class="input-append date" id="dateFechaNacimiento" data-date="${fecha.format('yyyy-MM-dd')}" data-date-format="yyyy/mm/dd">
						<input type="text" id="daFechaNacimiento" value="${fecha.format('yyyy-MM-dd')}" name="persona.deFechaNacimiento" autocomplete="off" value="${flash['persona.daFechaNacimiento']}"/>
						<span class="add-on"><i class="icon-calendar"></i></span>
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="deUsuario">Usuario</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="deUsuario" name="persona.deUsuario" autocomplete="off" value="${flash['persona.deUsuario']}"/>
						<span class="add-on"><i class="icon-ok-circle"></i></span>
					</div>					
					<span class="help-inline hide" id="spanDeUsuario">El usuario ingresado ya existe</span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label required-form" for="deClave">Clave</label>
				<div class="controls">
					<div class="input-append">
						<input type="password" id="deClave" name="persona.deClave" autocomplete="off" value="${flash['persona.deClave']}"/>
						<span class="add-on"><i class="icon-question-sign"></i></span>
					</div>
				</div>
			</div>
			<div class="form-actions">
				<button class="btn btn-primary" id="btnGuardar" type="">Guardar</button>
				<button class="btn" type="reset">Guardar</button>
			</div>
		</form>
	</fieldset>
</div>
<table class="table table-striped table-bordered table-condensed">
	<thead>
		<tr>
			<th>ID</th>
			<th>NOMBRE</th>
			<th>EMAIL</th>
			<th>DOCUMENTO</th>
		</tr>
	</thead>
	<tbody>
		#{list items:personas,as:'persona'}
			<tr>
				<td>${persona?.coPersona}</td>
				<td>${persona?.deNombre}</td>
				<td>${persona?.deCorreo}</td>
				<td>${persona?.nuDocumento}</td>
			</tr>
		#{/list}
	</tbody>
</table>
<script type="text/javascript">
	var Persona = {
			flag : 0,
			init : function(){
				$(document).delegate("#btnGuardar","click",Persona.guardar);
				$("#dateFechaNacimiento").datepicker();
				$("#deTelefono").mask("(999) 9999999?99",{placeholder:" "});
				$(document).delegate("#nuDocumento","blur",Persona.validarDocumento);
				$(document).delegate("#deCorreo","blur",Persona.validarCorreo);
				$(document).delegate("#deUsuario","blur",Persona.validarUsuario);
			},
			guardar : function(e){
				e.preventDefault();
				form = $("#formulario-persona");
				if(form.validateForm()==0 && Persona.flag == 0){
					form.submit();
				}else{
					if(Persona.flag == 1){
						Persona.validarDocumento();	
					}else if(Persona.flag == 2){
						Persona.validarCorreo();	
					}else if(Persona.flag == 3){
						Persona.validarUsuario();	
					}
				}
			},
			validarDocumento : function(){
				if($("#coTipoDeDocumento").val()!="00")
				$.ajax({
					url:"@{Personas.validarDocumento()}",
					data:{documento : $("#nuDocumento").val(),coTipoDocumento : $("#coTipoDeDocumento").val()},
					success:function(result){
						if(result.status == 0){
							Persona.flag = 1;
							$("#spanNuDocumento").show().parents("div.control-group").addClass("error");
						}else{
							Persona.flag = 0 ;
							$("#spanNuDocumento").hide().parents("div.control-group").removeClass("error");
						}
					}
				})								
			},
			validarCorreo : function(){
				if($("#deCorreo").val()!="")
				$.ajax({
					url:"@{Personas.validarCorreo()}",
					data:{correo : $("#deCorreo").val()},
					success:function(result){
						if(result.status == 0){
							Persona.flag = 2;
							$("#spanDeCorreo").show().parents("div.control-group").addClass("error");
						}else{
							Persona.flag = 0 ;
							$("#spanDeCorreo").hide().parents("div.control-group").removeClass("error");
						}
					}
				})
			},
			validarUsuario : function(){
				if($("#deUsuario").val()!="")
				$.ajax({
					url:"@{Personas.validarUsuario()}",
					data:{usuario : $("#deUsuario").val()},
					success:function(result){
						if(result.status == 0){
							Persona.flag = 3;
							$("#spanDeUsuario").show().parents("div.control-group").addClass("error");
						}else{
							Persona.flag = 0 ;
							$("#spanDeUsuario").hide().parents("div.control-group").removeClass("error");
						}
					}
				})
			}
	};
	$(function(){
		Persona.init();
	})
</script>